<script setup lang="ts">
import { ref, reactive, computed, readonly } from "vue";
const countRef = ref(18);
const countReactive = reactive({
  age: 18,
});
const computedCount = computed(() => countRef.value * 2);
const readonlyState = readonly(countReactive);
</script>

<template>
  <div class="reactive-wrap">
    <h1>响应式</h1>
    <h3>ref:{{ countRef }}</h3>
    <hr>
    <h3>reactive:{{ countReactive.age }}</h3>
    <hr>
    <h3>computed:{{ computedCount }}</h3>
    <hr>
    <h3>readonly:{{ readonlyState }}</h3>
  </div>
</template>
<style>
h1 {
  text-align: center;
}
h3 {
  text-align: center;
}
</style>
